<script setup lang='ts'>
// 数据就是视图 视图就是数据
 import { ref, reactive } from 'vue'
 import axios from 'axios'
//  const account = ref("ceshi06") // 账户
//  const password = ref("123456") // 密码
const loginForm = reactive<{
    account: string
    password: string
}>({
    account: 'ceshi06',
    password: '123456'

})
const login = async () => {
    if(loginForm.account && loginForm.password){
//  if(account.value && password.value) {
//    const res = await axios.post("https://meikou-api.itheima.net/login", {
//         account: account.value,
//         password: password.value
//     })
    const res = await axios.post("https://meikou-api.itheima.net/login", loginForm)
    alert(JSON.stringify(res.data))
    

 }else {
    alert("用户名和密码不能为空")
 }
}
       
</script>
       
<template>
       <div class="container">
         <div class="login_form">
            <input placeholder="请输入用户名" v-model="loginForm.account" type="text">
            <input placeholder="请输入密码" v-model="loginForm.password" type="password">
            <button @click="login">登录</button>
         </div>
          
       </div>
</template>
       
<style scoped>
       .container {
         width: "100%";
         height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
       }
       .login_form {
        width: 400px;
        height: 300px;
        background-color: pink;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 20px ;
        box-sizing: border-box;
       }
       .login_form  input, button {
         margin: 10px 0;
         width: 100%;
         height: 40px;
         padding: 0 20px;
         box-sizing: border-box;
    
       }
</style>